<!-- 引入下拉刷新插件 -->
<link rel="stylesheet" href="/assets/home/plugins/mescroll/mescroll.min.css" />
<script src="/assets/home/plugins/mescroll/mescroll.min.js"></script>

<!-- 引入异步请求工具 -->
<script src="/assets/home/plugins/axios/axios.min.js"></script>
<script src="/assets/home/plugins/axios/request.js"></script>

<link rel="stylesheet" href="/assets/home/css/search.css">
<style>
    .mui-content>.mui-table-view:first-child{
        margin-top: 0;
    }
</style>

<!-- 搜索框 -->

    <div class="mui-input-row mui-search">
        <input type="search" class="mui-input-clear" placeholder="{$keywords ? $keywords : '请输入课程名称'}" name="keywords"
            autocomplete />
    </div>

    <!-- 课程列表 -->
    <div id="sublist" class="mui-content mescroll">
        <ul class="mui-table-view">
            
        </ul>
    </div>

<!-- 底部 -->
{include file="common/footer" /}
<script>
    // 底部导航点击效果切换
    var tab=document.getElementsByClassName('tab-item');
    for(var i=0;i<tab.length;i++)
    {
        $(tab[i]).removeClass('mui-active');
    }
    $(tab[1]).addClass('mui-active')


    var page=1;//当前页
    var limit=5;//每页查询多少条
    var search='';//关键词

    // 关键词搜索
    $(`input[name=keywords]`).keydown(function(e){
        // 按下回车键发起请求
        if(e.keyCode ==13 || e.keyCode == 108)
        {
            search=$.trim($(this).val())
            DownCallback()
        }
    })
    //下拉刷新和上拉加载配置
    var scroll = new MeScroll('sublist', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            callback: UpCallback, //上拉回调,此处可简写
            page:{
                size:limit
            },
            toTop:{ //配置回到顶部按钮
                duration: 300,
                src : "/assets/home/plugins/mescroll/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset : 100
            },
            htmlNodata: '<div class="more">没有更多了..</div>',
        }
    })

    // 下拉刷新回调
    function DownCallback()
    {
        scroll.resetUpScroll()
        $('#sublist ul').empty()
    }

    // 上拉刷新回调
    async function UpCallback(current)
    {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page:page,
            limit:limit,
            search:search,
        };

        var result = await POST({
            // url:'/home/subject/search',
            url:'https://xw.520team.cn/home/subject/search',
            params: data
        })

        // console.log(result);
        // return false;

        if(result.code == 0)
        {
            mui.toast(result.msg, {duration: 1000})
            // 暂无更多数据
            scroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态
        scroll.endBySize(list.length, count)
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list)
    {
        for(var item of list)
        {
            var temp = `<li class="mui-table-view-cell mui-media">
                <a href="{:url('/home/subject/details')}?cid=${item.id}">
                    <div class="thumb">
                        <img class="img" src="${item.thumbs_cdn}">
                    </div>
                    <div class="mui-media-body">
                        <h5 class="title">${item.title}</h5>
                        <p class="content mui-ellipsis">课程分类：${item.category.name}</p>
                        <p class="footer">
                            <span class="like mui-icon mui-icon-starhalf">
                                <span>${item.likes_text}</span>
                            </span>
                            <span class="price">￥${item.price}</span>
                        </p>
                    </div>
                </a>
            </li>`
            $('#sublist ul').append(temp)
        }
    }
</script>